﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="BuXiaChu.OrderDishes.Web.ServiceStation.Test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        #scrollBar
        {
            font-size: 12px;
            color: #aa6;
            overflow: hidden;
            width: 300px;
            height: 200px;
        }
        #scrollBar div
        {
            height: 20px;
            line-height: 20px;
            white-space: nowrap;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    </form>
    <div id="scrollBar">
        <div>
            温岚 - 屋顶(周杰伦 对唱版)范玮琪 - 那些花儿 张韶涵 - 娃娃 孙楠&韩红 - 美丽的神话</div>
    </div>
</body>
</html>
<script type="text/javascript">

    scroll();
    function scroll() {
        var scrollBar = document.getElementById("scrollBar");
        var firstChild = scrollBar.getElementsByTagName("div")[0];
        var firstChildW = firstChild.offsetWidth;
        var scrollBarW = scrollBar.offsetWidth;
        if (firstChildW <= scrollBarW) return;
        window.setTimeout(function () { scrollLeft(scrollBar, firstChildW - scrollBarW, 0, firstChildW) }, 1000);
    }
    function scrollLeft(scrollBar, dif, start) {
        start++;
        scrollBar.getElementsByTagName("div")[0]["style"]["marginLeft"] = -start + "px";
        if (start == dif) {
            window.setTimeout(function () { scrollLeft(scrollBar, dif, 0) }, 3000);
        } else {
            window.setTimeout(function () { scrollLeft(scrollBar, dif, start) }, 5);
        }
    }
</script>
<script type="text/javascript">
    var marqueeContent = new Array(); //定义一个数组，用来存放显示内容 
    marqueeContent[0] = '滚动字幕一';
    marqueeContent[1] = '滚动字幕二';
    marqueeContent[2] = '滚动字幕三';
    marqueeContent[3] = '滚动字幕四';
    marqueeContent[4] = '滚动字幕五';
    marqueeContent[5] = '滚动字幕六';
    marqueeContent[6] = '滚动字幕七';
    marqueeContent[7] = '滚动字幕八';
    marqueeContent[8] = '滚动字幕九';

    var marqueeInterval = new Array(); //定义一些常用而且要经常用到的变量 
    var marqueeId = 0;
    var marqueeDelay = 1000;
    var marqueeHeight = 18;
    var marqueeBox = "";

    //接下来的是定义一些要使用到的函数 
    Array.prototype.random = function () {
        var a = this;
        var l = a.length;
        for (var i = 0; i < l; i++) {
            var r = Math.floor(Math.random() * (l - i));
            a = a.slice(0, r).concat(a.slice(r + 1)).concat(a[r]);
        }
        return a;
    }
    function initMarquee() {
        marqueeContent = marqueeContent.random();
        var str = '';
        for (var i = 0; i < Math.min(3, marqueeContent.length); i++) str += (i > 0 ? ' ' : '') + marqueeContent[i];
        document.write('<div id=marqueeBox style="overflow:hidden;height:' + marqueeHeight + 'px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]=setInterval(\'startMarquee()\',marqueeDelay)"><div>' + str + '</div></div>');
        marqueeId += 2;
        if (marqueeContent.length > 3) marqueeInterval[0] = setInterval("startMarquee()", marqueeDelay);
        marqueeBox = document.getElementById("marqueeBox");
    }
    function startMarquee() {
        var str = '';

        /************以下是修改过的部分**************/
        var l = marqueeContent.length;
        for (var i = 0; i < 3; i++) {
            marqueeId = ++marqueeId % l;
            str += (i > 0 ? ' ' : '') + marqueeContent[marqueeId];
        }
        /************以上是修改过的部分**************/
        if (marqueeBox.childNodes.length == 1) {
            var nextLine = document.createElement('DIV');
            nextLine.innerHTML = str;
            marqueeBox.appendChild(nextLine);
        }
        else {
            marqueeBox.childNodes[0].innerHTML = str;
            marqueeBox.appendChild(marqueeBox.childNodes[0]);
            marqueeBox.scrollTop = 0;
        }
        clearInterval(marqueeInterval[1]);
        marqueeInterval[1] = setInterval("scrollMarquee()", 20);
    }
    function scrollMarquee() {
        marqueeBox.scrollTop++;
        if (marqueeBox.scrollTop % marqueeHeight == (marqueeHeight - 1)) {
            clearInterval(marqueeInterval[1]);
        }
    }
     initMarquee();
</script>
